<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in items" :key="item.id">
					<router-link :to=" '/home/newlistinfo/' + item.id">
						<img class="mui-media-object mui-pull-left" :src="item.url">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class="mui-ellipsis">
                                <span>发布时间: {{ item.time | dateformat('YYYY-MM-DD HH:mm:ss') }}</span>
                                <span>点击: {{ item.num }} 次</span>
                            </p>
						</div>
					</router-link>
				</li>
			</ul>
    </div>
</template>

<script>
export default {
    data() {
		return {
			items: [
				{id: '12', url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3568272053,2040793382&fm=58', time: new Date(), title: '王小二', num:12},
				{id: '22', url: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3611364264,2238752415&fm=58', time: new Date(), title: '韩小龙', num:33},
				{id: '33', url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2729616848,1393770845&fm=58', time: new Date(), title: '李乐天', num:212}
			]
		}
	},
}
</script>

<style lang="scss" scoped>
    .mui-table-view{
        li{
            h1{
                font-size: 14px;
            }
            .mui-ellipsis{
                font-size: 12px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>

